<template>
	<div class="root">
		<div class="a1 c12">
			<an-nav></an-nav>
		</div>
		<div class="flex c4 a1">
			<div class="c5">{{$l('上次登录时间','page.t3')}}：{{time(adminData.login_time,"yyyy-mm-dd hh:MM:ss")}}</div>
			<div>
				<el-button size="large" type="primary" @click="asyncServerImg">{{$l('同步服务器图片文件','page.t6')}}</el-button>
				<!-- <el-button size="large" type="primary" @click="asyncQiniu">同步七牛云空间文件</el-button> -->
				<el-button size="large" type="primary" @click="router.push('/pass')">{{$l('修改登录密码','page.t7')}}</el-button>
			</div>
		</div>
		<div class="c7 a1" style="margin-bottom: 14px;">
			<div class="c2">{{$l('模块快速入口','page.t4')}}</div>
			<div class="flex c11">
				<div v-for="(v,i) in pageData.modularList" :key="i" class="c10">
					<router-link :to="v.path">
						{{v.name}}<span>{{v.count}}</span>条{{$l('数据','page.t9')}}
					</router-link>
				</div>
			</div>
		</div>
		<div class="c3 flex">
			<div class="c1 a1">
				<div class="c2">{{$l('操作日志','page.t8')}}</div>
				<el-table :data="pageData.logList" style="width: 100%" size="medium">
					<el-table-column prop="time" label="操作时间" width="180">
						<template #default="scope">
							{{time(scope.row.time,"yyyy-mm-dd hh:MM:ss")}}
						</template>
					</el-table-column>
					<el-table-column prop="action" label="操作行为"/>
				</el-table>
			</div>
			<div class="c6">
				<div class="a1 c7">
					<div class="c2">{{$l('服务器信息','page.t5')}}</div>
					<el-table :data="pageData.list" style="width: 100%" size="medium">
						<el-table-column prop="name" label="配置名称" width="220" />
						<el-table-column prop="value" label="配置数据"/>
					</el-table>
				</div>
			</div>
		</div>
	</div>

</template>

<script setup>
	import time from "@/utils/timeFormat.js";
	import { ElMessageBox } from 'element-plus'
	import publicJS from "@/hook/public.js";
	const {ElMessage,api,config} = publicJS();

	const pageData = reactive({
		list:[],
		logList:[],
		modularList:[]
	});
	
	api.post('a/index/getHomeData').then(res=>{
		pageData.list = res.data.sys_info;
		pageData.logList = res.data.log;
		pageData.modularList = res.data.all_data;
	})

	
	const adminData = JSON.parse(localStorage.getItem('login'))
	
	const router = useRouter()

	//同步七牛云空间文件 所有文件
	const asyncQiniu = ()=>{
		ElMessageBox.alert('确定同步七牛云文件？', '系统提示', {
			confirmButtonText: '确定',
			callback: (action) => {
				console.log(action)
				if(action == 'confirm'){
					config.spaceList.forEach(v=>{
						api.post("a/other/getQiniuFile",{
							name:'other',
							limit:2000,
							marker:'',
							prefix:v.value,//需要同步的文件前缀
							is_sync:'1',//是否同步 1是 0否
						}).then(res=>{
							ElMessage.success(v.label+'同步成功')
						})
					})
				}
			}
		})
	}

	//同步服务器 uploads 所有文件
	const asyncServerImg = ()=>{
		ElMessageBox.alert('确定同步服务器文件？', '系统提示', {
			confirmButtonText: '确定',
			callback: (action) => {
				console.log(action)
				if(action == 'confirm'){
					api.post("a/other/async_server_img").then(res=>{
						ElMessage.success('local同步成功')
					})
				}
			}
		})

	}
</script>

<style lang="scss" scoped>
	.a1{box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 0 6px rgba(0, 0, 0, .02);border-radius: 5px;}
    .root{
		background: #f6f6f6;box-shadow: none;padding: 0;
		:deep(.an-nav-1){border-bottom:0;padding:20px 10px;}
		.c1{box-sizing: border-box;width: calc(50% - 7px);background: #fff;overflow: hidden;padding:5px 10px 10px;}
		.c2{font-size: 14px;padding: 0 10px;border-bottom:1px solid #ccc;line-height: 40px;}
		.c3{justify-content: space-between;align-items: flex-start;}
		.c4{margin-bottom: 14px;padding:10px;font-size: 14px;background: #fff;justify-content: space-between;}
		.c5{margin-right: 20px;}
		.c6{@extend.c1;background: none;padding: 0;}
		.c7{@extend.c1;width: 100%;}
		.c8{margin-top: 10px;flex-wrap: wrap;padding-left: 10px;}
		.c8 img{width: 50px;display: block;height: 50px;}
		.c9{cursor: pointer;height: 50px;width: 50px;line-height: 50px;font-size: 14px;text-align: center;background: var(--el-color-primary);color: #fff;}
		.c10{font-size: 16px;border-right:1px solid #ddd;text-align: center;padding: 10px;flex:1;min-width: 120px;}
		.c10:hover{cursor: pointer;color: var(--el-color-primary);}
		.c10 span{color: var(--el-color-primary);display: inline-block;padding: 0 2px;}
		.c10:last-child{border:0;}
		.c11{margin-top: 10px;flex-wrap: wrap;}
		.c12{background: #fff;margin-bottom: 15px;}
	}


	html.dark {
		.root{background: #222;}
		.c1{background: #161616;}
		.c2{border-bottom-color:#555;}
		.c4{background: #161616;}
		.c10{border-right-color:#555;}
		.c12{background: #161616;}
	}
	
	@media screen and (max-width: 1024px){
		.root{
			.c1{width: 100%;}
			.c3{display: block;}
			.c4{display: block;}
			.c4 .c5{margin-bottom: 10px;}
			.c10{border-right: none;}
		}
	}
</style>
